<template>
  <div>
    <el-row class="demo" style="padding: 10px;">
      <el-row>
        <h2 style="font-size: 22px; font-weight: 400; color: #1f2f3d;">功能区按钮</h2>
      </el-row>
      <el-row>
        <niupi-btn type="add" @click="add">新增xxx</niupi-btn>
        <niupi-btn type="update" @click="update(id)">修改</niupi-btn>
        <niupi-btn type="delete">删除</niupi-btn>
        <niupi-btn type="import">导入</niupi-btn>
        <niupi-btn type="export">导出</niupi-btn>
        <niupi-btn type="search">搜索</niupi-btn>
        <niupi-btn type="reset">重置</niupi-btn>
      </el-row>

      <el-row>
        <h2 style="font-size: 22px; font-weight: 400; color: #1f2f3d;">table行内按钮</h2>
      </el-row>
      <el-row>
        <niupi-btn type="add" @click="add"></niupi-btn>
        <niupi-btn type="update" @click="update"></niupi-btn>
        <niupi-btn type="delete"></niupi-btn>
        <niupi-btn type="import"></niupi-btn>
        <niupi-btn type="export"></niupi-btn>
        <niupi-btn type="search"></niupi-btn>
        <niupi-btn type="reset"></niupi-btn>
      </el-row>

      <el-row>
        <h2 style="font-size: 22px; font-weight: 400; color: #1f2f3d;">可以重写样式</h2>
      </el-row>
      <el-row>
        <niupi-btn type="add" @click="add" style="background-color:red;"></niupi-btn>
        <niupi-btn type="update" @click="update" style="background-color:green;"></niupi-btn>
        <niupi-btn type="delete"></niupi-btn>
        <niupi-btn type="import"></niupi-btn>
        <niupi-btn type="export"></niupi-btn>
        <niupi-btn type="search"></niupi-btn>
        <niupi-btn type="reset"></niupi-btn>
      </el-row>

      <el-row>
        <h2 style="font-size: 22px; font-weight: 400; color: #1f2f3d;">按钮大小</h2>
      </el-row>
      <el-row>
        <niupi-btn type="add">默认按钮</niupi-btn>
        <niupi-btn type="add" size="medium">中等按钮</niupi-btn>
        <niupi-btn type="add" size="small">小型按钮</niupi-btn>
        <niupi-btn type="add" size="mini">超小按钮</niupi-btn>
      </el-row>

      <el-row>
        <h2 style="font-size: 22px; font-weight: 400; color: #1f2f3d;">按钮禁用</h2>
      </el-row>
      <el-row>
        <niupi-btn type="add" disabled @click="click">默认按钮</niupi-btn>
        <niupi-btn type="add" :disabled="isdisabled" @click="click">中等按钮</niupi-btn>
        <niupi-btn type="add" :disabled="!isdisabled" @click="click">小型按钮</niupi-btn>
        <niupi-btn type="add" @click="toggleDisable">切换disable状态</niupi-btn>
      </el-row>

    </el-row>
  </div>
</template>

<script>
import frameworkUtil from "@/framework/js/frameworkUtil.js";
import niupiBtn from "@/components/niupiBtn/niupiBtn.vue";
export default {
  name: 'mybtn',
  components: {
    'niupi-btn': niupiBtn,
  },
  data () {
    return {
      frameworkUtil: frameworkUtil,
      isdisabled: true,
      id: "xxxxx",
    }
  },
  methods: {
    click () {
      this.$layer.msg('click');
    },
    add () {
      this.$layer.msg('新增');
    },
    update (id) {
      this.$layer.msg('修改, id=' + id);
    },
    toggleDisable () {
      this.isdisabled = !this.isdisabled;
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
.demo .el-row {
  margin-bottom: 20px;
}
</style>
